<template>
  <div class="app-container">
    <el-card header="新品开发列表" style="width: 100%">
      <div slot="header" class="clearfix">
        <span>新品开发列表</span>
        <el-button
          type="primary"
          @click="handleSearch"
          size="mini"
          style="float: right; margin: 0px 10px"
          >查询</el-button
        >
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        max-height="325px"
        @row-click="rowClick"
      >
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="jzmName" label="客户">
          <template #default="scope">
            {{ getDictLabel(scope.row.jzmName, customerOptions) }}
          </template>
        </el-table-column>
        <el-table-column prop="itmMstrJzdm" label="机型"></el-table-column>
        <el-table-column prop="researchPhase" label="流程节点">
          <template #default="scope">
            <dict-tag
              :options="rdmoduleTitle"
              :value="scope.row.researchPhase"
            />
          </template>
        </el-table-column>
        <el-table-column prop="engineer" label="工程师"></el-table-column>
        <el-table-column
          prop="lastUpdateTime"
          label="更新时间"
        ></el-table-column>
      </el-table>
      <div
        style="
          padding: 5px;
          background-color: white;
          text-align: right;
          width: 100%;
          display: flex;
          justify-content: flex-end;
        "
      >
        <el-pagination
          :current-page.sync="queryParams.pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 30, 40]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <el-tabs v-model="activeName">
        <el-tab-pane label="流程图示" name="first">
          <el-steps
            :active="activeIndex"
            style="margin-top: 20px; height: 280px"
            v-loading="loading"
          >
            <el-step
              v-for="(item, index) in stepsData.slice(0, 2)"
              :key="index"
              :status="item.status"
            >
              <template #title>
                <dict-tag
                  :options="rdmoduleTitle"
                  :value="item.researchPhase"
                />
              </template>
              <template #description>
                <div
                  style="font-size: 13px; cursor: pointer"
                  @click="goPage(item)"
                >
                  <div>
                    <span>名字：</span>
                    <span>{{ item.engineer }}</span>
                  </div>
                  <div>
                    <span>日期：</span>
                    <span>{{ item.lastUpdateTime }}</span>
                  </div>
                </div>
              </template>
            </el-step>
            <el-step
              v-for="(item, index) in stepsData.slice(-3)"
              :key="index"
              :status="item.status"
            >
              <template #title>
                <dict-tag
                  :options="rdmoduleTitle"
                  :value="item.researchPhase"
                />
              </template>
              <template #description>
                <div
                  style="font-size: 13px; cursor: pointer"
                  @click="goPage(item)"
                >
                  <div>
                    <span>名字：</span>
                    <span>{{ item.engineer }}</span>
                  </div>
                  <div>
                    <span>日期：</span>
                    <span>{{ item.lastUpdateTime }}</span>
                  </div>
                  <div>
                    <span>送样完成率：</span>
                    <span>{{ item.completeRate }}</span>
                  </div>
                  <div>
                    <span>送样及时率：</span>
                    <span>{{ item.sampleDeliveryRate }}</span>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="查询" v-model="searchVisible" width="30%" append-to-body>
      <el-form :model="queryParams" ref="queryForm" label-width="68px">
        <el-form-item label="客户" prop="jzmName">
          <el-input
            :value="getDictLabel(queryParams.jzmName, customerOptions)"
            disabled
          />
        </el-form-item>
        <el-form-item label="机型" prop="itmMstrJzdm">
          <HdSearchInput
            v-model="queryParams.itmMstrJzdm"
            keyName="itmMstrJzdm"
            modulePath="rdmodule/researchData"
            @change="
              (value) => {
                handleChangeJzdm(value);
              }
            "
            placeholder="请选择机种代码"
          ></HdSearchInput>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getList">确 定</el-button>
        <el-button @click="searchVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import mixins from "@/mixins/common";
import RdmoduleService from "@/api/rdmodule/rdmodule";

export default {
  name: "NewProductDiagram",
  mixins: [mixins.customerOptions],
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        jzmName: null,
        itmMstrJzdm: null,
      },
      form: {},
      total: 0,
      tableData: [],
      rdmoduleTitle: [],
      activeIndex: 0,
      activeName: "first",
      stepsData: [],
      curRow: {},
      loading: false,
      searchVisible: false,
    };
  },
  created() {
    this.getList();
    this.getDicts("rdmodule_title").then((response) => {
      this.rdmoduleTitle = response.data;
    });
  },
  methods: {
    getList() {
      RdmoduleService.getList(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.total = res.total;
        this.getInfo(res.rows[0]);
        this.searchVisible = false;
      });
    },
    getInfo(row) {
      this.loading = true;
      RdmoduleService.getInfo(row.itmMstrJzdm).then((res) => {
        if (res.code == 200) {
          this.stepsData = res.data.researchDataPhaseList;
          this.changeStatus();
          this.loading = false;
        }
      });
    },
    goPage(val) {
      let url = "";
      if (val.status == "success" || val.status == "finish") {
        switch (val.researchPhase) {
          case "1":
            url = "/RDmodule/productionData/NewProduct";
            this.$router.push(url).then((r) => {
              setTimeout(() => {
                this.$bus.$emit("query-NewProductDiagram", val.itmMstrJzdm);
              }, 1000);
            });
            break;
          case "2":
            url = "/RDmodule/productionData/MoldAcceptance";
            this.$router.push(url).then((r) => {
              setTimeout(() => {
                this.$bus.$emit("query-NewProductDiagram", val.itmMstrJzdm);
              }, 1000);
            });
            break;
          case "3":
            url = "/RDmodule/productionData/SampleTry";
            this.$router.push(url).then((r) => {
              setTimeout(() => {
                this.$bus.$emit("query-NewProductDiagram", val.itmMstrJzdm);
              }, 1000);
            });
            break;
          case "4":
            url = "/RDmodule/productionData/SmallBatch";
            this.$router.push(url).then((r) => {
              setTimeout(() => {
                this.$bus.$emit("query-NewProductDiagram", val.itmMstrJzdm);
              }, 1000);
            });
            break;
          case "5":
            url = "/RDmodule/productionData/ProductionTransfer";
            this.$router.push(url).then((r) => {
              setTimeout(() => {
                this.$bus.$emit("query-NewProductDiagram", val.itmMstrJzdm);
              }, 1000);
            });
            break;
        }
      } else {
        this.$message.error("当前阶段未开始，无法查看");
      }
    },
    changeStatus() {
      for (let i = 0; i < this.stepsData.length; i++) {
        if (this.stepsData[i].researchStatus == 0) {
          this.stepsData[i].status = "wait";
        } else if (this.stepsData[i].researchStatus == 1) {
          this.stepsData[i].status = "finish";
        } else {
          this.stepsData[i].status = "success";
          this.activeIndex = i + 1;
        }
      }
    },
    rowClick(row) {
      if (this.curRow == row) return;
      if (row) {
        this.curRow = row;
        this.getInfo(row);
      }
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    handleCurrentChange(res) {
      this.queryParams.pageNum = res;
      this.getList();
    },
    handleSizeChange(res) {
      this.queryParams.pageSize = res;
      this.getList();
    },
    handleSearch() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 20,
        jzmName: null,
        itmMstrJzdm: null,
      };
      this.searchVisible = true;
    },
    handleChangeJzdm(val) {
      RdmoduleService.getInfo(val.itmMstrJzdm).then((res) => {
        if (res.code == 200) {
          this.queryParams.jzmName = res.data.jzmName;
          this.$nextTick(() => {
            Object.assign(this.form, res.data);
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
